import { PureComponent } from 'react';
import {
   	Row,
   	Col,
   	Form,
   	Input,
	Button,
	Modal,
} from 'antd';

const FormItem = Form.Item;

//查看表单
@Form.create()
class ViewForm extends PureComponent {
    static defaultProps = {
        handleViewModalVisible: () => {},
    values: {},
};

constructor(props) {
    super(props);

    this.state = {
        formVals: {
        	parentid: props.values.parentid,
            levelcode: props.values.levelcode,
            name: props.values.name,
            enname: props.values.enname,
            handler: props.values.handler,
            icon: props.values.icon,
            id: props.values.id,    
        },
    };


}

renderContent = (formVals) => {
    const { form } = this.props;

    return (
        <Form  layout="vertical" hideRequiredMark>


            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col  md={12} sm={24}>
	                    <FormItem  label="操作名称">
	                        {form.getFieldDecorator('name', {
	                        rules: [{ required: false, message: '请输入至少五个字符的操作名称！', min: 5 }],
	                        initialValue: formVals.name,
	                        })(<Input readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="英文名称">
	                        {form.getFieldDecorator('enname', {
	                        rules: [{ required: false, message: '请输入至少五个字符的英文名称！', min: 5 }],
	                        initialValue: formVals.enname,
	                        })(<Input readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>

            </Row>

            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

	                <Col  md={12} sm={24}>
	                    <FormItem  label="操作方法">
	                        {form.getFieldDecorator('handler', {
	                        rules: [{ required: false, message: '请输入至少五个字符的操作方法！', min: 5 }],
	                        initialValue: formVals.handler,
	                        })(<Input readOnly placeholder="请输入" />)}
	                    </FormItem>
	                </Col>
	

	                <Col  md={12} sm={24}>
	                    <FormItem  label="图标">
	                        {form.getFieldDecorator('icon', {
	                        rules: [{ required: false, message: '请输入至少五个字符的图标！', min: 5 }],
	                        initialValue: formVals.icon,
	                        })(<Input readOnly placeholder="请输入" />)}
	                    </FormItem>
	                </Col>

			</Row>
    </Form>
);

};



render() {
    const { viewModalVisible, handleViewModalVisible, values } = this.props;
    this.state = {
        formVals: {
        	parentid: values.parentid,
            levelcode: values.levelcode,
            name: values.name,
            enname: values.enname,
            handler: values.handler,
            icon: values.icon,
            id: values.id,    
        },
    };

    return (
        <Modal
    width={800}
    height={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    footer={<Button key="back" onClick={ () => handleViewModalVisible(false, values) }>取消</Button>}
    onCancel={() => handleViewModalVisible(false, values)}
>

    {this.renderContent(this.state.formVals)}
</Modal>
);
}

}

export default ViewForm;